<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华北地区</title>
    <script src="./asset/echarts/echarts.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 准备一个容器，放置图表 -->
<div id="demo" style="width: 1000px;height: 600px;" class="container text-center">

</div>

<!-- 使用js绘制图表 -->
<script>
    //初始化
    var myChart = echarts.init(document.querySelector('#demo'))

    //指定图表的配置
    var option = {
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [50, 250],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [
                    { value: 280, name: '柑橘种植技术' },
                    { value: 136, name: '柑橘病虫害防治' },
                    { value: 108, name: '柑橘品种' },
                    { value: 86, name: '柑橘百科' },
                    { value: 80, name: '柑橘视频' }
                ]
            }
        ]
    };
    myChart.setOption(option)

</script>
<link rel="stylesheet" href="./asset/bootstrap@5.3.0/css/bootstrap.min.css">
</body>
</html>
